<style scoped>
.file-item {
  margin-left: 10px;
}
.dir-item {
  margin-left: 10px;
}
.el-checkbox {
  margin-right: 0;
}
</style>
<template>
  <div  v-if="reload">
    <p @click.stop="handleDirClick(fileList)">
      <i :class="isshow?'el-icon-folder-opened':'el-icon-folder'"></i>
      <el-checkbox v-model="fileList.checked" @change="dirchange"></el-checkbox>
      {{fileList.get('name')}}
    </p>
    <div
      class="dir-item"
      v-for="(dir,zindex) in dirlist"
      :key="'dir'+lindex+'-'+zindex"
      v-show="isshow"
    >
      <filetree  :index="lindex+'-'+zindex" :fileList="fileList.get(dir)"></filetree>
    </div>
    <div v-show="isshow">
      <p v-for="(item,index) in filelist" :key="'file'+lindex+'-'+index">
        <i class="file-item el-icon-document"></i>
        <el-checkbox v-model="fileList.get(item).checked"></el-checkbox>
        <span @click.stop="fileClick(fileList.get(item),fileList)">{{fileList.get(item).name}}</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "filetree",
  data() {
    return {
      isshow: false,
      checkunm:0,
      reload:true,
    };
  },
  props: {
    fileList: {
      type: Map,
      default: () =>
        new Map([
          ["name", "空文件夹"],
          ["fileList", new Set()],
          ["dirlist", new Set()]
        ])
    },
    lindex: {
      type: String,
      default: "1"
    },
    showdir: {
      type: Boolean,
      default: false
    },
    ischeckAll: {
      type: Boolean,
      default: false
    },
    dirshowstate: {
      type: Function.showdir,
      default: function() {
        return item => {
          this.isshow = item || !this.isshow;
        };
      }
    }
  },
  watch: {
    fileList(newval, oldval) {},
  },
  methods: {
      dirchange(value){
          let _this = this;
          for(let file of this.filelist){
              _this.fileList.get(file).checked=value
          };
        for(let dir of this.dirlist){
              _this.fileList.get(dir).checked=value
          };  
          this.$forceUpdate();
      },
    fileClick(file, leaf) {
      this.$emit("cilckfile", file, leaf);
    },
    handleDirClick(leaf) {
      this.$emit("cilckdir", leaf);
      this.isshow = !this.isshow;
      // this.$forceUpdate();
    }
  },
  computed: {
    dirlist() {
      return Array.from(this.fileList.get("dirlist"));
    },
    filelist() {
      return Array.from(this.fileList.get("fileList"));
    },
    dirlistlength() {
      return this.dirlist.length;
    },
    filelistlength() {
      return this.filelist.length;
    },
    checkAll(){
        return this.checkunm ==this.filelistlength+this.dirlistlength
    },
    fileSys() {
      return Object.fromEntries(this.filelist);
    }
  },
  created() {},
  mounted() {}
};
</script>
